<script src="__PUBLIC__/js/ext/touchslide/js/jquery.touchSlider.js"></script>
<link href="__PUBLIC__/js/ext/touchslide/css/touchslider.css" rel="stylesheet" type="text/css"/>
<div class="main_visual" style="width:745px;height: 280px;">
    <div class="flicking_con">
        <volist name="store_home_adv_list" id="vo">
            <a href="#">{$key}</a>
        </volist>
    </div>
    <div class="main_image">
        <ul>
            <volist name="store_home_adv_list" id="vo">
                <php>
                    $link = ($vo['link'] == 'http://' || empty($vo['link'])) ?'javascript:': $vo['link'];
                </php>
                <li><a href="{$link}" title="{$vo.title}" target="_blank"><img src="{$vo.image|getThumbImageById=745,280}" alt="{$vo.title}" class="img-responsive"></a></li>
            </volist>
        </ul>
    </div>
    <a href="javascript:;" id="btn_prev"><i class="icon-chevron-left"></i></a>
    <a href="javascript:;" id="btn_next"><i class="icon-chevron-right"></i></a>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".main_visual").hover(function(){
            $("#btn_prev,#btn_next").fadeIn()
        },function(){
            $("#btn_prev,#btn_next").fadeOut()
        });

        $dragBln = false;

        $(".main_image").touchSlider({
            flexible : true,
            speed : 1000,
            btn_prev : $("#btn_prev"),
            btn_next : $("#btn_next"),
            paging : $(".flicking_con a"),
            counter : function (e){
                $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
            }
        });

        $(".main_image").bind("mousedown", function() {
            $dragBln = false;
        });

        $(".main_image").bind("dragstart", function() {
            $dragBln = true;
        });

        $(".main_image a").click(function(){
            if($dragBln) {
                return false;
            }
        });

        timer = setInterval(function(){
            $("#btn_next").click();
        }, 5000);

        $(".main_visual").hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            },5000);
        });

        $(".main_image").bind("touchstart",function(){
            clearInterval(timer);
        }).bind("touchend", function(){
                    timer = setInterval(function(){
                        $("#btn_next").click();
                    }, 5000);
                });

    });
</script>